<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工列表</title>

    <link href="/static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/static/jquery/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        $(function () {
            $("a.btn-delete").click(function () {
                //alert($(this).attr("pageNum"))
                if (confirm("您确定删除嘛？")) {
                    location.href = "/location/delete?locationId=" + $(this).attr("demo");
                }
            })
            $("a.btn-edit").click(function () {
                if(confirm("您确定修改嘛？")){
                    location.href = "/location/get?locationId=" +  $(this).attr("demo");
                }
            })
        })
    </script>
</head>
<body>
<h1>员工列表</h1>
<hr/>
<form class="form-inline" action="/location">
    <div class="form-group">

        <div class="input-group">
            <div class="input-group-addon">国家名称</div>
            <select class="form-control" name="countryId">
                <option value="">请选择国家</option>
                <c:forEach items="${countries}" var="country">

                    <option value="${country.countryId}" ${country.countryId == countryId?"selected='selected'":""}>${country.countryName}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">搜索</button>
</form>
<table class="table table-hover table-bordered">
    <tr>
        <th>地区编号</th>
        <th>街道地址</th>
        <th>邮政编码</th>
        <th>城市</th>
        <th>省份</th>
        <th>国家名称</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${pageInfo.list}" var="e">
        <tr>
            <td>${e.locationId}</td>
            <td>${e.streetAddress}</td>
            <td>${e.postalCode}</td>
            <td>${e.city}</td>
            <td>${e.stateProvince}</td>
            <td>${e.countryName}</td>
            <td><a class="btn-edit" href="javascript:void(0)" demo="${e.locationId}"><span
                    class="glyphicon glyphicon-edit"></span></a>&nbsp;&nbsp;
                <a class="btn-delete" href="javascript:void(0)" demo="${e.locationId}"
                   pageNum="${pageInfo.pageNum}"><span class="glyphicon glyphicon-trash"></span></a></td>
        </tr>
    </c:forEach>
</table>
<nav aria-label="Page navigation">
    <ul class="pagination">
        <!--
        keyword=zfa&jobId=AC_ACCOUNT&departmentId=20
        -->
        <c:choose>
            <c:when test="${pageInfo.isFirstPage}">
                <li class="disabled">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:when>
            <c:otherwise>
                <li>
                    <a href="/location?${url}&pageNum=${pageInfo.pageNum-1}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:otherwise>
        </c:choose>

        <c:forEach begin="1" end="${pageInfo.pages}" var="i">
            <li ${i == pageInfo.pageNum?"class='active'":''}><a href="/location?${url}&pageNum=${i}">${i}</a></li>
        </c:forEach>


        <c:choose>
            <c:when test="${pageInfo.isLastPage}">
                <li class="disabled">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:when>
            <c:otherwise>
                <li>
                    <a href="/location?${url}&pageNum=${pageInfo.pageNum+1}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </c:otherwise>
        </c:choose>
    </ul>
</nav>
</body>
</html>
